@import 'common.sass'

.banner-container
    width: vw(750)
    height: vw(400)
    background-image: url("images/index/banner-0.png")
    background-size: vw(750) vw(400)

.project-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .content-box
        width: vw(700)
        height: auto
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        font-size: vw(24)
        line-height: vw(48)
        text-align: left
        text-indent: 2em
        word-break: break-all
        color: $title_color


.suitable-people-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    align-items: center

    .content-box
        width: vw(640)
        height: auto
        display: flex
        flex-direction: column

        .line
            width: vw(640)
            height: auto
            display: flex
            justify-content: space-between

            .element
                width: vw(212)
                height: auto
                display: flex
                flex-direction: column
                justify-content: space-between
                align-items: center

                .img
                    width: vw(100)
                    height: vw(100)

                .chinese
                    font-size: vw(24)

                .english
                    font-size: vw(16)
                    -webkit-transform: scale(0.65)

.brand-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .content-box
        width: vw(750)
        height: vw(490)
        display: flex

        .left
            width: vw(200)
            height: vw(490)
            background-image: url("images/index/brand-left.png")
            background-size: vw(200) vw(490)
            background-position: center center

        .right
            width: vw(550)
            height: vw(490)

            .line
                width: vw(550)
                height: vw(70)
                display: flex

                .icon-box
                    width: vw(70)
                    height: vw(70)
                    display: flex
                    justify-content: center
                    align-items: center
                    font-size: vw(30)
                    color: white

                    .icon
                        width: vw(40)
                        height: vw(40)
                        border-radius: 50%
                        background-color: $brand_main_color
                        text-align: center

                .text
                    width: vw(480)
                    height: vw(70)
                    line-height: vw(70)
                    font-size: vw(24)

            .light-bg
                background-color: rgba(30, 155, 177, 0.05)

            .dark-bg
                background-color: rgba(30, 155, 177, 0.1)

.contact-flow-container
    width: vw(500)
    height: vw(460)

    position: fixed
    z-index: 99
    left: vw(125)
    bottom: vw(50)

    background-color: rgba(30, 155, 177, 0.9)
    border-radius: vw(10)

    color: white

    display: flex
    flex-direction: column
    justify-content: flex-start
    align-items: center

    .blank-1
        width: 100%
        height: vw(100)
    .title-1
        font-size: vw(30)
    .blank-2
        width: 100%
        height: vw(15)
    .title-2
        font-size: vw(48)
    .blank-3
        width: 100%
        height: vw(40)
    .title-3
        font-size: vw(24)
    .blank-4
        width: 100%
        height: vw(60)
    .button
        width: vw(220)
        height: vw(60)
        line-height: vw(60)
        text-align: center

        color: $title_color
        background-color: white
